<template>
  <div>
    <!--    <button @click = "flash"></button>-->

    <el-row type="flex" class="header">
      <el-col></el-col>
      <el-col>
        <el-button type="primary" @click="NewProps">新增试题 </el-button>
      </el-col>
    </el-row>

    <div v-for="(item, index) in pqList" :key="index">
      <pq :pq="item" class="text" :index="index" @deleteSign="deleteQs"></pq>
    </div>

    <!-- <el-dialog :visible.sync="addQueShow">
      <el-button @click="addquestion"></el-button>
    </el-dialog> -->

    <el-dialog
      title="新增试题"
      :visible.sync="addQuesShow"
      class="input"
      width="40%"
    >
      <el-row type="flex" class="card1">
        <el-col>
          <el-select
            v-model="selectHub"
            multiple
            filterable
            allow-create
            default-first-option
            placeholder="请选择/输入题库ID"
          >
            <el-option
              v-for="item in HubItems"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
       <el-col> <el-button @click="QueryPid">查询题库内题目</el-button></el-col>
      </el-row>
      <el-row type="flex" class="card2">
      <el-col>
        <el-select
        v-model="addQue"
        multiple
        filterable
        allow-create
        default-first-option
        placeholder="请选择/输入题目ID"
      >
        <el-option
          v-for="item in QuesItems"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select></el-col>
      <el-col></el-col>
      </el-row>
      <div slot="footer">
        <el-button @click="addQuesShow = false">取 消</el-button>
        <el-button type="primary" @click="SubmitAddQues">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axiosinstance from "@/util/http";

import pq from "@/view/Home/components/PaperBase/pq";

export default {
  name: "PaperDetail",
  prpos: [],
  data() {
    return {
      tp_id: null,
      user: null,
      pqList: [],
      number: null,
      dialogFormVisible: false,
      addQuesShow: false,
      addQue: [],
      QuesItems: [
        { value: 19, label: 19 },
        { value: 20, label: 20 },
        { value: 21, label: 21 },
      ],
      selectHub: [],
      HubItems: [
        { value: 19, label: 19 },
        { value: 20, label: 20 },
        { value: 21, label: 21 },
      ],
      Questions: {
        type: "",
        title: "",
        qs_body: {
          answers: "",
          selections: [],
        },
      },
    };
  },

  computed: {
    totalprice: function () {
      return this.pqList.length;
    },
  },

  methods: {
    deleteQs(qt_id) {
      console.log("del", qt_id);
      for (let i = 0; i < this.pqList.length; i++) {
        console.log(this.pqList[i].id, qt_id, this.pqList[i].id === qt_id);
        if (this.pqList[i].id === qt_id) {
          this.pqList.splice(i, 1);
          this.$forceUpdate();
          break;
        }
      }
    },

    goToAddQuestion() {
      // this.$router.push('/home/PaperAddQuestion',{
      //   query:{
      //     tp_id:this.tp_id
      //   }
      // })
    },
    NewProps() {
      axiosinstance
        .get("/questionbase/questionbaselist", {
          params: {
            page: 1,
            pageSize: 100,
          },
        })
        .then((res) => {
          console.log(res);
          if (res.data.status === 0) {
            console.log(res);
            this.HubItems = res.data.data.map((x) => {
              return { value: x.qb_id, label: x.qb_name };
            });
            console.log(this.HubItems);
            this.addQuesShow = true;
          }
        });
    },
    SubmitAddQues() {
      // console.log(this.addQue);
      let selectArr = this.addQue.map((x) => parseInt(x));
      console.log(selectArr);
      axiosinstance
        .post("/paper/addtestquestions", {
          tp_id: this.tp_id,
          qt_ids: selectArr,
          username: this.$store.getters.getuser.username,
        })
        .then((res) => {
          if (res.data.status === 0) {
            this.$message({
              message: "插入成功",
              type: "success",
            });
            this.addQuesShow = false;
            this.$router.go(0);
          }
        });
    },
    QueryPid() {
      let selectArr = this.selectHub.map((x) => parseInt(x));
      console.log(selectArr);
      axiosinstance
        .get("/questionbase/questionlist", {
          params: {
            qb_id: selectArr[0],
            page: 1,
            pagesize: 100,
            username: this.$store.getters.getuser.username,
          },
        })
        .then((res) => {
          console.log(res);
          if (res.data.status === 0) {
            this.$message({
              message: "成功",
              type: "success",
            });
            this.QuesItems = res.data.data.map((x) => {
              return { value: x.id, label: x.title };
            });
          }
        });
    },
  },

  created() {
    // this.qsItemlist();
    this.tp_id = this.$route.query.tp_id;
    this.user = this.$store.getters.getuser;
    axiosinstance
      .get("/paper/testpaperdetail", {
        params: {
          username: this.user.username,
          tp_id: this.tp_id,
        },
      })
      .then((res) => {
        //console.log(res);
        this.pqList = res.data.data[0].Questions;
        this.$forceUpdate();
        console.log("detail", this.pqList);
      });
  },
  components: {
    pq,
    // questionAdd,
  },
};
</script>

<style scoped lang="less">
.header {
  margin: 10px;
}
.card1{
  margin: 15px;
}
.card2{
  margin: 15px;
}
</style>